<template>
  <div class="product">
    <ul>
        <li v-for="item in cpu" :key="item" ><img :src="item.imgURL"><h3>{{item.title}}</h3></li>
    </ul>

    <!-- 选项卡 -->
    <div class="cursor">
        <!-- 按钮区域 -->
        <div class="btnlist">
            <button class="active" @click="active()">畅销榜</button>
            <button class="reliang" @click="reliang()">热量榜</button>
        </div>
    </div>
        <!-- 展示区 -->
        <table border="1" cellpadding="0" cellspacing="0" v-if="a==1"> 
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>图片</th>
                <th>时间</th>
                <th>是否上架</th>
                <th>热销</th>
                <th>销量</th>
                <th>访问量</th>
            </tr>
            <tr  v-for="item in nulllist" :key="item">
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td><img :src="item.imgURL"></td>
                <td>{{item.createTime}}</td>
                <td>{{item.grounding == true ? '是' :'否'}}</td>
                <td>{{item.hot}}</td>
                <td>{{item.sale}}</td>
                <td>{{item.visits}}</td>
            </tr>
        </table>

        <table border="1" cellpadding="0" cellspacing="0" v-if="a==2">
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>图片</th>
                <th>时间</th>
                <th>是否上架</th>
                <th>热销</th>
                <th>销量</th>
                <th>访问量</th>
            </tr>
            <tr  v-for="item in nullhot" :key="item">
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td><img :src="item.imgURL"></td>
                <td>{{item.formattedDate}}</td>
                <td>{{item.grounding == true ? '是' :'否'}}</td>
                <td>{{item.hot}}</td>
                <td>{{item.sale}}</td>
                <td>{{item.visits}}</td>
            </tr>
        </table>
    
  </div>
</template>

<script>
import ImgList from "../../assets/index.js";
export default {
    name:'ProductList',
    data(){
        return{
           ImgList,
           nulllist:[],
           nullhot:[],
           a : 0,
           formattedDate:'',
           
        }
    },
    mounted:{
       
    },
    computed:{
        cpu(){
            
            let visits = ImgList.sort((a,b)=>b.visits-a.visits);
            return visits.splice(0,5);
        },
        // formatTimestamp(){
        //     ImgList.forEach(item => {
        //     const date = new Date(item.createTime);
        //     const year = date.getFullYear();
        //     const month = (date.getMonth() + 1).toString().padStart(2, '0');
        //     const day = date.getDate().toString().padStart(2, '0');
        //     const hours = date.getHours().toString().padStart(2, '0');
        //     const minutes = date.getMinutes().toString().padStart(2, '0');
        //     const seconds = date.getSeconds().toString().padStart(2, '0');
        //     this.formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        //     return item.formattedDate; 
        //     });
    // }
        
    },
    methods:{
        active(){
            this.a=1;
            ImgList.forEach(item=>{
                if (item.grounding==true) {
                this.nulllist = ImgList.sort((a,b)=>b.sale-a.sale);
                return this.nulllist;
            }
            })
            
            
        },
        reliang(){
            this.a=2;
            ImgList.forEach(item=>{
                if (item.grounding==true) {
            this.nullhot = ImgList.sort((a,b)=>b.hot-a.hot);
            return this.nullhot;
              }
            })
        },
        
    }
    
}


</script>

<style scoped>
.product{
    width: 100%;
    height: 100%;
}
.product ul{
    width: 95%;
    height: 250px;
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product ul li{
    width: 20%;
    height: 100%;
    background-color: rgba(254, 154, 54, 0.7);
    text-align: center;
}
.product ul li img{
    width: 85%;
    height:165px;
    margin: 10px auto;
}
.product ul li span{
    display: block;
    width: 100%;
    margin-top: 8px;
}
.product .cursor{
    width: 95%;
    margin: 0 auto;
    border-bottom: 3px solid white;
}
.product button{
    width: 100px;
    height: 40px;
    border: 0;
    font-weight: 800;
    font-size: large;
    margin-right: 5px;
}
.product .active{
    background-color: rgb(96, 197, 255);
    color: blue;
}
.product .reliang{
    background-color:blue;
    color: white;
}
.product table{
    width: 95%;
    margin: 0 auto;   
    text-align: center;
}

.product table tr img{
    width: 200px;
    height:150px;
    margin-top: 20px;
    margin: 10px auto;
}
</style>